<template>
  <el-card class="content">
    <div class="title">{{ this.kuang }}风险等级示意图</div>
    <img class="img" :src="srcUrl" />
    <div class="divBox">
      <div class="risk">风险等级:</div>
      <el-button type="primary">四级——蓝色</el-button>
      <el-button style="background: yellow">三级——黄色</el-button>
      <el-button type="warning">二级——橙色</el-button>
      <el-button type="danger">一级——红色</el-button>
    </div>
    <!-- <el-row>
      <el-col :span="4" class="risk">撤离路线：</el-col>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
      <el-col :span="5"
        ><img src="/public/safety-technology/箭头.png" alt=""
      /></el-col>
    </el-row> -->
  </el-card>
</template>

<script>
import axios from "axios";
import {
  getTailingPondList,
  getViewRiskLevel,
  imgUrl,
  viewRiskLevelImage,
} from "../../api/risk-assessment";
export default {
  name: "FourColor",
  data() {
    return {
      srcUrl: "",
      kuang: "",
      imgUrl,
      lowRisk: "",
      generalRisk: "",
      higherRisk: "",
      majorRisk: "",
      riskUrl: "",
    };
  },
  mounted() {
    this.viewRiskLevelImage();
    // this.getViewRiskLevel();
    this.getTailingPondList();
  },
  methods: {
    async viewRiskLevelImage() {
      const res = await viewRiskLevelImage({
        tainglingPondId: Number(sessionStorage.getItem("sensorId")),
      });
      this.riskUrl = res.parameter;
    },
    // async getViewRiskLevel() {
    //   const res = await getViewRiskLevel({
    //     tainglingPondId: Number(sessionStorage.getItem("sensorId")),
    //   });
    //   if (res.resultCode == "200") {
    //     this.lowRisk = res.parameter.lowRisk;
    //     this.generalRisk = res.parameter.generalRisk;
    //     this.higherRisk = res.parameter.higherRisk;
    //     this.majorRisk = res.parameter.majorRisk;
    //   }
    // },
    async getTailingPondList() {
      await getTailingPondList({
        tailingPondId: sessionStorage.getItem("sensorId"),
      }).then((res) => {
        if (res.resultCode == "200") {
          this.kuang = res.parameter[0].tailingName;
          // if (res.parameter[0].riskName == "低") {
          //   this.srcUrl = this.imgUrl + this.lowRisk;
          // }
          // if (res.parameter[0].riskName == "一般") {
          //   this.srcUrl = this.imgUrl + this.generalRisk;
          // }
          // if (res.parameter[0].riskName == "较大") {
          //   this.srcUrl = this.imgUrl + this.higherRisk;
          // }
          // if (res.parameter[0].riskName == "重大") {
          //   this.srcUrl = this.imgUrl + this.majorRisk;
          // }
          this.srcUrl = this.imgUrl + this.riskUrl;
        }
      });
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 91vh;
  margin-right: 0.01rem;
  text-align: center;
}
.title {
  font-size: 0.15rem;
  text-align: center;
  margin-bottom: 0.2rem;
}
.img {
  width: auto;
  max-width: 100%;
  min-width: 4.95rem;
  height: 60vh;
}
.risk {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.08rem;
}
.divBox >>> .el-button {
  font-size: 0.07rem;
  margin-left: 0.02rem;
  width: 0.66rem;
}
</style>
